<template>
  <Card>
    <div id="addAdministration">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        添加行政人员
        <!-- <Divider /> -->
      </div>
      <div class="from">
        <Form ref="addForm" :label-width="115" :model="form" :rules="formValidate" inline>
          <Row>
            <Col id="IDPhoto" span="20" style="text-align: center;">
            <FormItem>
              <upload-pic-thumb
                ref="uploadSelf"
                :params="{saveDir: 'personnel', type: 'image'}"
                @on-change="form.ID_photo_url=$event"
              ></upload-pic-thumb>
              <div style="font-size: 14px;line-height: 15px;height: 15px;">人员照片</div>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">基础信息</div>
          <Row>
            <Col span="10">
            <FormItem label="姓名：" prop="name">
              <Input v-model="form.name" placeholder="输入姓名"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="人员状态：">
              <Select v-model="form.status" clearable @on-change="onStatusChange">
                <Option :value="0">在职</Option>
                <Option :value="1">离职</Option>
              </Select>
            </FormItem>
            </Col>
            <Col v-if="showDepartureAt" span="10">
            <FormItem label="离职时间：">
              <DatePicker
                v-model="form.departure_at"
                format="yyyy-MM-dd"
                placeholder="离职时间"
                type="date"
                @on-change="form.graduated_at=$event"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <Form-item label="所属部门：" prop="department_id">
              <Select v-model="form.department_id" clearable>
                <Option v-for="(item,index) in dict" :key="index" :value="item">{{ item }}</Option>
              </Select>
            </Form-item>
            </Col>
            <Col span="10">
            <FormItem label="职务：">
              <Input v-model="form.office_id" placeholder="输入职务"/>
            </FormItem>
            </Col>
          </Row>
          <!-- <Divider dashed /> -->
          <Row>
            <Col span="10">
            <FormItem label="人员排序：" prop="sort">
              <Input v-model="form.sort" placeholder="值越小，排在前"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="联系电话：" prop="phone">
              <Input v-model="form.phone" placeholder="输入联系电话"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="内部电话：">
              <Input v-model="form.work_phone" placeholder="输入内部电话"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="内部短号：">
              <Input v-model="form.short_number" placeholder="输入内部短号"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="籍贯：">
              <Input v-model="form.native_place" placeholder="输入籍贯"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="民族：">
              <Input v-model="form.nation" placeholder="输入民族"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="政治面貌：">
              <Select v-model="form.political" clearable>
                <Option value="预备党员">预备党员</Option>
                <Option value="党员">党员</Option>
                <Option value="群众">群众</Option>
                <Option value="其它">其它</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="婚姻状况：">
              <Select v-model="form.married" clearable>
                <Option value="已婚">已婚</Option>
                <Option value="未婚">未婚</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="学历：">
              <Select v-model="form.education" clearable>
                <Option value="小学">小学</Option>
                <Option value="初中">初中</Option>
                <Option value="高中">高中</Option>
                <Option value="中专">中专</Option>
                <Option value="大专">大专</Option>
                <Option value="本科">本科</Option>
                <Option value="硕士">硕士</Option>
                <Option value="博士">博士</Option>
                <Option value="其它">其它</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="专业：">
              <Input v-model="form.major" placeholder="输入专业"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="毕业院校：">
              <Input v-model="form.graduated_school" placeholder="输入毕业院校"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="毕业时间：">
              <DatePicker
                v-model="form.graduated_at"
                format="yyyy-MM-dd"
                placeholder="选择毕业时间"
                type="date"
                @on-change="form.graduated_at=$event"
              ></DatePicker>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="是否加入工会：">
              <RadioGroup v-model="form.is_join_tu">
                <Radio label="0">否</Radio>
                <Radio label="1">是</Radio>
              </RadioGroup>
            </FormItem>
            </Col>
          </Row>
          <!-- <Divider dashed /> -->
          <Row>
            <Col span="10">
            <FormItem label="参加工作时间：">
              <DatePicker
                v-model="form.work_at"
                format="yyyy-MM-dd"
                placeholder="选择时间"
                type="date"
                @on-change="form.work_at=$event"
              ></DatePicker>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="入职时间：">
              <DatePicker
                v-model="form.join_at"
                format="yyyy-MM-dd"
                placeholder="选择时间"
                type="date"
                @on-change="form.join_at=$event"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="转正时间：" prop="positive_at">
              <DatePicker
                v-model="form.positive_at"
                format="yyyy-MM-dd"
                placeholder="选择转正时间"
                type="date"
                @on-change="form.positive_at=$event"
              ></DatePicker>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="合同到期时间：">
              <DatePicker
                v-model="form.contract_expire_at"
                format="yyyy-MM-dd"
                placeholder="选择合同到期时间"
                type="date"
                @on-change="form.contract_expire_at=$event"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">社保情况</div>
          <Row>
            <Col span="10">
            <FormItem label="养老保险状态：">
              <RadioGroup v-model="form.endowment_insurance_status">
                <Radio label="1">在保</Radio>
                <Radio label="0">弃保</Radio>
              </RadioGroup>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="养老入保时间：">
              <DatePicker
                v-model="form.endowment_insurance_payment_at"
                format="yyyy-MM-dd"
                placeholder="选择时间"
                type="date"
                @on-change="payment($event,'endowment_insurance_status')"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="医疗保险状态：">
              <RadioGroup v-model="form.medical_insurance_status">
                <Radio label="1">在保</Radio>
                <Radio label="0">弃保</Radio>
              </RadioGroup>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="医疗入保时间：">
              <DatePicker
                v-model="form.medical_insurance_payment_at"
                format="yyyy-MM-dd"
                placeholder="选择时间"
                type="date"
                @on-change="payment($event,'medical_insurance_status')"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="失业保险状态：">
              <RadioGroup v-model="form.unemployment_insurance_status">
                <Radio label="1">在保</Radio>
                <Radio label="0">弃保</Radio>
              </RadioGroup>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="失业入保时间：">
              <DatePicker
                v-model="form.unemployment_insurance_payment_at"
                format="yyyy-MM-dd"
                placeholder="选择时间"
                type="date"
                @on-change="payment($event,'unemployment_insurance_status')"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="工伤保险状态：">
              <RadioGroup v-model="form.injured_insurance_status">
                <Radio label="1">在保</Radio>
                <Radio label="0">弃保</Radio>
              </RadioGroup>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="工伤入保时间：">
              <DatePicker
                v-model="form.injured_insurance_payment_at"
                format="yyyy-MM-dd"
                placeholder="选择时间"
                type="date"
                @on-change="payment($event,'injured_insurance_status')"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="生育保险状态：">
              <RadioGroup v-model="form.maternity_insurance_status">
                <Radio label="1">在保</Radio>
                <Radio label="0">弃保</Radio>
              </RadioGroup>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="生育入保时间：">
              <DatePicker
                v-model="form.maternity_insurance_payment_at"
                format="yyyy-MM-dd"
                placeholder="选择时间"
                type="date"
                @on-change="payment($event,'maternity_insurance_status')"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">身份证</div>
          <Row>
            <Col class-name="cardHeight" span="10">
            <FormItem label="身份证：">
              <upload-pic-thumb
                ref="uploadIDCard"
                :params="{saveDir: 'personnel', type: 'image'}"
                @on-change="form.IDCard_url=$event"
              ></upload-pic-thumb>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="身份证号码：" prop="IDCard">
              <Input v-model="form.IDCard" placeholder="输入身份证"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="到期时间：">
              <DatePicker
                v-model="form.IDCard_expire_at"
                format="yyyy-MM-dd"
                placeholder="选择身份证到期时间"
                type="date"
                @on-change="form.IDCard_expire_at=$event"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="身份证地址：">
              <Input v-model="form.IDCard_address" placeholder="输入身份证地址"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="现居住地址：">
              <Input v-model="form.residential_address" placeholder="现居住地址"/>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">工作经历</div>
          <FormItem class="fullFormItem" label>
            <Row>
              <Col span="4">
              <Input class="borderNone" type="text" value="开始时间"/>
              </Col>
              <Col span="4">
              <Input class="borderNone" type="text" value="结束时间"/>
              </Col>
              <Col span="5">
              <Input class="borderNone" type="text" value="单位"/>
              </Col>
              <Col span="4">
              <Input class="borderNone" type="text" value="职位"/>
              </Col>
              <Col span="5">
              <Input class="borderNone" type="text" value="离职原因"/>
              </Col>
            </Row>
          </FormItem>
          <FormItem
            v-for="(item, index) in form.works"
            v-if="item.status"
            :key="'works-'+index"
            class="fullFormItem"
            label
          >
            <Row>
              <Col span="4">
              <DatePicker
                v-model="item.start_at"
                class="filed"
                format="yyyy-MM-dd"
                placeholder="开始时间"
                type="date"
              ></DatePicker>
              </Col>
              <Col span="4">
              <DatePicker
                v-model="item.end_at"
                class="filed"
                format="yyyy-MM-dd"
                placeholder="结束时间"
                type="date"
              ></DatePicker>
              </Col>
              <Col span="5">
              <Input v-model="item.unit" class="filed" placeholder="单位" type="text"></Input>
              </Col>
              <Col span="4">
              <Input v-model="item.office" class="filed" placeholder="职位" type="text"></Input>
              </Col>
              <Col span="4">
              <Input v-model="item.reason" class="filed" placeholder="离职原因" type="text"></Input>
              </Col>
              <Col span="3">
              <Button style="color: #ed4014;" type="text" @click="handleRemove(index)">删除</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button icon="md-add" long type="dashed" @click="handleAdd">插入一行</Button>
          </FormItem>
          <div class="fromTitle">教育经历</div>
          <FormItem class="fullFormItem" label>
            <Row>
              <Col span="4">
              <Input class="borderNone" type="text" value="开始时间"/>
              </Col>
              <Col span="4">
              <Input class="borderNone" type="text" value="结束时间"/>
              </Col>
              <Col span="5">
              <Input class="borderNone" type="text" value="院校"/>
              </Col>
              <Col span="4">
              <Input class="borderNone" type="text" value="学历"/>
              </Col>
              <Col span="5">
              <Input class="borderNone" type="text" value="专业"/>
              </Col>
            </Row>
          </FormItem>
          <FormItem
            v-for="(item, index) in form.edus"
            v-if="item.status"
            :key="'edus-'+index"
            class="fullFormItem"
            label
          >
            <Row>
              <Col span="4">
              <DatePicker
                v-model="item.start_at"
                class="filed"
                format="yyyy-MM-dd"
                placeholder="开始时间"
                type="date"
              ></DatePicker>
              </Col>
              <Col span="4">
              <DatePicker
                v-model="item.end_at"
                class="filed"
                format="yyyy-MM-dd"
                placeholder="结束时间"
                type="date"
              ></DatePicker>
              </Col>
              <Col span="5">
              <Input v-model="item.school" class="filed" placeholder="院校" type="text"></Input>
              </Col>
              <Col span="4">
              <Input v-model="item.edu" class="filed" placeholder="学历" type="text"></Input>
              </Col>
              <Col span="4">
              <Input v-model="item.major" class="filed" placeholder="专业" type="text"></Input>
              </Col>
              <Col span="3">
              <Button style="color: #ed4014;" type="text" @click="handleRemoveEdu(index)">删除</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button icon="md-add" long type="dashed" @click="handleAddEdu">插入一行</Button>
          </FormItem>
          <div class="fromTitle">家庭成员</div>
          <FormItem class="fullFormItem" label>
            <Row>
              <Col span="5">
              <Input class="borderNone" type="text" value="姓名"/>
              </Col>
              <Col span="5">
              <Input class="borderNone" type="text" value="关系"/>
              </Col>
              <Col span="5">
              <Input class="borderNone" type="text" value="工作单位"/>
              </Col>
              <Col span="6">
              <Input class="borderNone" type="text" value="联系电话"/>
              </Col>
            </Row>
          </FormItem>
          <FormItem
            v-for="(item, index) in form.family"
            v-if="item.status"
            :key="'family-'+index"
            class="fullFormItem"
            label
          >
            <Row>
              <Col span="5">
              <Input v-model="item.name" class="filed" placeholder="姓名" type="text"></Input>
              </Col>
              <Col span="5">
              <Input v-model="item.relationship" class="filed" placeholder="关系" type="text"></Input>
              </Col>
              <Col span="5">
              <Input v-model="item.work_unit" class="filed" placeholder="工作单位" type="text"></Input>
              </Col>
              <Col span="6">
              <Input v-model="item.phone" class="filed" placeholder="联系电话" type="text"></Input>
              </Col>
              <Col span="3">
              <Button style="color: #ed4014;" type="text" @click="handleRemoveFamily(index)">删除</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button icon="md-add" long type="dashed" @click="handleAddFamily">插入一行</Button>
          </FormItem>
          <div class="fromTitle">证书证件上传</div>
          <div class="btns">
            <upload-file-multiple-s
              ref="uploadFile"
              :params="{saveDir: 'admin', type: 'file'}"
              button-name="上传资料"
              @on-change="refreshTable($event)"
            ></upload-file-multiple-s>
          </div>
          <div style="margin-bottom:15px">
            <div class="imagesBox">
              <div v-for="item in form.adminFile">
                <div class="cardImage">
                  <img :src="item.file_path" alt="">
                </div>
                <div class="cardText">{{ item.file_name }}</div>
              </div>
            </div>
            <!-- <Table
              :columns="columns"
              :data="form.adminFile"
              border
              height="350"
              ref="selection"
              size="small"
              stripe
            ></Table> -->
          </div>
          <div class="fromItem"></div>
          <div style="height:50px;"></div>
          <div class="fromItem">
            <FormItem label>
              <Button
                :loading="submitLoading"
                icon="md-checkmark-circle"
                style="margin-right:10px"
                type="primary"
                @click="handleSubmit"
              >保存
              </Button>
              <Button
                :loading="submitResetLoading"
                icon="md-checkmark-circle"
                style="margin-right:10px"
                type="primary"
                @click="handleSubmitReset"
              >保存后继续添加
              </Button>
              <Button icon="md-refresh" type="default" @click="handleReset">重置</Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
  </Card>
</template>
<script>
import './addAdministration.css'
import UploadPicThumb from '../../my-components/upload-pic-thumb'
import {store} from '../../../api/personnel'
import UploadFileMultipleS from '../../my-components/upload-file-multiple-s'
import {dictData} from '../../../api/insure'

export default {
  components: {
    UploadFileMultipleS,
    UploadPicThumb
  },
  data() {
    return {
      showDepartureAt: false,
      submitLoading: false,
      submitResetLoading: false,
      form: {
        name: '',
        status: '',
        departure_at: '',
        sort: 0,
        phone: '',
        native_place: '',
        nation: '',
        political: '',
        married: '',
        education: '',
        graduated_school: '',
        graduated_at: '',
        work_at: '',
        join_at: '',
        positive_at: '',
        contract_expire_at: '',
        IDCard_url: '',
        ID_photo_url: '',
        IDCard: '',
        IDCard_expire_at: '',
        IDCard_address: '',
        residential_address: '',
        endowment_insurance_status: '',
        endowment_insurance_payment_at: '',
        medical_insurance_status: '',
        medical_insurance_payment_at: '',
        unemployment_insurance_status: '',
        unemployment_insurance_payment_at: '',
        injured_insurance_status: '',
        injured_insurance_payment_at: '',
        maternity_insurance_status: '',
        maternity_insurance_payment_at: '',
        type: '0',
        department_id: '',
        office_id: '',
        work_phone: '',
        short_number: '',
        works: [],
        edus: [],
        family: [],
        is_join_tu: '',
        adminFile: []
      },
      columns: [
        {
          title: '附件名称',
          key: 'file_name',
          align: 'left'
        },
        {
          title: '附件格式',
          key: 'file_type',
          align: 'center'
        },
        {
          title: '文件大小（kb）',
          key: 'file_size',
          align: 'center'
        },
        {
          title: '上传时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '上传人员',
          key: 'user_name',
          align: 'center'
        }
      ],
      index: 1,
      eduIndex: 1,
      familyIndex: 1,
      formValidate: {
        name: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
        phone: [
          {
            required: true,
            len: 11,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        IDCard: [
          {
            required: true,
            len: 18,
            message: '请输入正确的身份证号码',
            trigger: 'blur'
          }
        ]
      },
      dict: []
    }
  },
  watch: {
    $route: 'handleReset'
  },
  mounted() {
    this.form.sort = this.$route.params.total
    this.init()
  },
  methods: {
    init() {
      dictData({title: '通讯录部门'}).then(res => {
        if (res.data.result) {
          this.dict = res.data.result
        }
      })
    },
    handleAdd() {
      this.index++
      this.form.works.push({
        start_at: '',
        end_at: '',
        unit: '',
        office: '',
        reason: '',
        index: 1,
        status: 1
      })
    },
    handleAddEdu() {
      this.eduIndex++
      this.form.edus.push({
        start_at: '',
        end_at: '',
        school: '',
        edu: '',
        major: '',
        index: 1,
        status: 1
      })
    },
    handleAddFamily() {
      this.familyIndex++
      this.form.family.push({
        name: '',
        relationship: '',
        work_unit: '',
        phone: '',
        index: 1,
        status: 1
      })
    },
    handleRemove(index) {
      this.form.works[index].status = 0
    },
    handleRemoveEdu(index) {
      this.form.edus[index].status = 0
    },
    handleRemoveFamily(index) {
      this.form.family[index].status = 0
    },
    handleReset() {
      this.$refs.addForm.resetFields()
      this.$refs.uploadSelf.setData(null)
      this.$refs.uploadIDCard.setData(null)
      // this.$refs.uploadSelf.handleClearFiles();
      // this.$refs.uploadIDCard.handleClearFiles();
      this.form = {
        name: '',
        status: '',
        departure_at: '',
        phone: '',
        native_place: '',
        nation: '',
        political: '',
        married: '',
        education: '',
        graduated_school: '',
        graduated_at: '',
        work_at: '',
        join_at: '',
        positive_at: '',
        contract_expire_at: '',
        IDCard_url: '',
        ID_photo_url: '',
        IDCard: '',
        IDCard_expire_at: '',
        IDCard_address: '',
        residential_address: '',
        endowment_insurance_status: '',
        endowment_insurance_payment_at: '',
        medical_insurance_status: '',
        medical_insurance_payment_at: '',
        unemployment_insurance_status: '',
        unemployment_insurance_payment_at: '',
        injured_insurance_status: '',
        injured_insurance_payment_at: '',
        maternity_insurance_status: '',
        maternity_insurance_payment_at: '',
        type: '0',
        department_id: '',
        office_id: '',
        work_phone: '',
        short_number: '',
        works: [],
        edus: [],
        family: [],
        is_join_tu: '',
        adminFile: []
      }
    },
    handleSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          store(this.form).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.$store.commit('closeTag', 'addAdministration')
              this.$router.push({
                name: 'administration'
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    handleSubmitReset() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.submitResetLoading = true
          store(this.form).then(res => {
            this.submitResetLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.handleReset()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    onStatusChange(value) {
      this.form.departure_at = ''
      this.showDepartureAt = value === 1
    },
    refreshTable(event) {
      this.form.adminFile.push(event.detail)
    },
    transDate(e) {
      const date = new Date(e)
      return (
        date.getFullYear() +
        '-' +
        (date.getMonth() + 1).toString().padStart(2, '0')
      )
    },
    payment(event, e) {
      if (e == 'endowment_insurance_status') {
        this.form.endowment_insurance_status = event ? '1' : '0'
      }
      if (e == 'medical_insurance_status') {
        this.form.medical_insurance_status = event ? '1' : '0'
      }
      if (e == 'unemployment_insurance_status') {
        this.form.unemployment_insurance_status = event ? '1' : '0'
      }
      if (e == 'injured_insurance_status') {
        this.form.injured_insurance_status = event ? '1' : '0'
      }
      if (e == 'maternity_insurance_status') {
        this.form.maternity_insurance_status = event ? '1' : '0'
      }

    }
  }
}
</script>

<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}

#IDPhoto .upload-list {
  width: 155px;
  height: 200px;
  line-height: 200px;
}

#IDPhoto .ivu-form-item-content {
  margin-left: 0 !important;
}

#addAdministration .fromTitle {
  margin: 0;
  margin-bottom: 20px;
}

.ivu-divider-horizontal {
  margin: 10px 0;
}
</style>
